<template>
<div>
  <el-card>
    <el-row v-if="role_id != 3">
      <el-form ref="conditionForm" :model="conditionForm" :rules="conditionRules" label-width="80px">
        <el-col :span="8">
          <el-form-item label="房间号">
            <el-input v-model="conditionForm.rId" placeholder="请输入房间号" :clearable="true"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" :offset="10">
          <el-form-item>
            <template>
              <el-button type="success" size="small" @click="onSearch">搜索</el-button>
              <el-button size="small" @click="onReset('keywords')">重置</el-button>
            </template>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="content-header">
      <el-button v-if="role_id != 3" type="success" size="small" @click="handleAdd">添加</el-button>
    </div>
    <div>
      <el-table :data="conditionData" stripe style="width: 100%" :header-cell-style="{
      'background-color': '#fafafa',
      'color': 'rgb(103, 194, 58)',
      'border-bottom': '1px rgb(103, 194, 58) solid'}">
        <el-table-column prop="rid" label="房间编号"></el-table-column>
        <el-table-column prop="apt_id" label="公寓编号"></el-table-column>
        <el-table-column prop="echarge" label="电费"></el-table-column>
        <el-table-column prop="wcharge" label="水费"></el-table-column>
        <el-table-column prop="etime" label="上次缴电费时间"></el-table-column>
        <el-table-column prop="wtime" label="上次交水费时间"></el-table-column>
        <el-table-column prop="hygiene" label="卫生情况">
          <template slot-scope="scope">
            <span>{{scope.row.hygiene==10? '已打扫':'未打扫'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="打扫卫生时间"></el-table-column>
        <el-table-column v-if="role_id != 3" label="操作">
          <template slot-scope="scope">
            <el-button v-if="role_id != 3" type="text" @click="editClick(scope.row)" class="editButton">编辑</el-button>
            <el-button v-if="role_id != 3" type="text" @click="deleteClick(scope.row.id)" class="deleteButton">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--分页-->
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[8, 10, 15, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          class="pagination-warp">
      </el-pagination>
    </div>
  </el-card>

<!--  新增对话框-->
  <add-condition ref="add" @addClickBack="addBack"></add-condition>
<!--  编辑对话框-->
  <edit-condition ref="edit" @editClickBack="editBack"></edit-condition>
</div>
</template>

<script>
import addCondition from "@/components/condition/addCondition";
import editCondition from "@/components/condition/editCondition";
export default {
name: "wAndE",
  data(){
    return{
      role_id: 3,
      conditionForm:{
        rId:''
      },
      conditionData:[],
      conditionRules: {},
      pagenum:1,
      pagesize:10,
      total:100
    }
  },
  components:{
    addCondition,
    editCondition
  },
  created() {
    this.getConditionList()
    //获取当前用户对应的角色
    this.getCurrentUserRule()
  },
  methods:{
    //监听pagesize的改变事件
    handleSizeChange(newSize){
      this.pagesize=newSize
      this.getConditionList()
    },
    //监听页码的变化
    handleCurrentChange(newPage){
      this.pagenum=newPage
      this.getConditionList()
    },
    //获取当前用户角色对应的方法
    async getCurrentUserRule(){
      const {data:res} = await this.$http.post('/util/getJWTMessage', {
        "token": window.localStorage.getItem('token'),
        "keyName": "role_id"//获取的是当前角色对应的 rule_id
      })
      this.role_id = res.data
    },
    //获得房间情况列表
    async getConditionList(){
      let params={
        pageNum:this.pagenum,
        pageSize:this.pagesize
      }
      const {data:res} = await this.$http.post('/rCondition/getRConditions',params)
      if(res.code!==200) return this.$message.error('获取房间情况信息失败！')
      this.conditionData=res.data.list
      this.total=res.data.total
    },
    //搜索
    async onSearch(){
      let params={
        rId:this.conditionForm.rId,
        pageNum:this.pagenum,
        pageSize:this.pagesize
      }
      const {data:res} = await this.$http.post('/rCondition/getRConditions',params)
      if(res.code!==200) return this.$message.error('获取房间情况信息失败！')
      // this.$message.success('获取情况信息成功~')
      this.conditionData=res.data.list
      this.total=res.data.total
    },
  //重置
    onReset(){
      this.$refs.conditionForm.resetFields()
      this.getConditionList()
    },
  //新增
    handleAdd(){
      this.$refs.add.init()
    },
  //新增对话框的回调函数
    addBack(){
      this.getConditionList()
    },
  //编辑
    editClick(row){
      this.$refs.edit.init(row)
    },
  //编辑对话框的回调函数
    editBack(){
      this.getConditionList()
    },
  //删除
    deleteClick(id){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('/rCondition/deleteConditionById/'+id).then(()=>{
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getConditionList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      })
    }
  }
}
</script>

<style scoped>

</style>